<template>
  <div>
    <div
      style="display: flex;justify-content: space-between;padding: 19px 20px;"
    >
      <img
        :src="
          source.displayDiagram
            ? source.displayDiagram
            : $img + source.houseImageDiv
        "
        style="width: 31%;cursor: pointer;height: 136px;object-fit: contain;background-color: rgb(209 204 204 / 20%);"
        @click="housedetails(source)"
        alt
      />
      <div
        style="width: 50%;display: flex;flex-direction: column;justify-content: space-between;"
      >
        <div
          style="color: #333333;font-size: 18px;font-weight: 600;cursor: pointer;"
          class="line2"
          @click="housedetails(source)"
        >
          <tag-view :item="source"></tag-view>{{ source.title }}
        </div>
        <div
          style="color: #666666;font-size: 14px;font-weight: 400;margin-top: 8px;margin-bottom: 8px;"
          class="line1"
        >
          {{ source.region }} {{ source.address }}
        </div>
        <div style="color: #666666;font-size: 14px;font-weight: 400;">
          {{ source.houseType }} {{ source.area }}/㎡ {{ source.floor }}
        </div>
        <div style="flex-grow: 1;"></div>
        <div style="display: flex;align-sources: center;">
          <img
            style="width: 21px;height: 21px;border-radius: 21px;cursor: pointer;"
            :src="
              source.image
                ? source.image
                : 'https://pic.bangbangtongcheng.com/static/my/header.png'
            "
            @click="toAgent(source)"
          />
          <div
            class="line1"
            style="color: #333333;font-size: 14px;font-weight: 400;margin-left: 6px;margin-right: 12px;cursor: pointer;"
            @click="toAgent(source)"
          >
            {{ source.userName }}
          </div>
          <div
            style="color: #64B6A8;font-size: 13px;font-weight: 400;padding: 2px 8px;border: 1px solid #64B6A8;border-radius: 4px;cursor: pointer;"
            @click="shopdetails(source)"
          >
            {{ source.shopName || "个人房源" }}
          </div>
        </div>
      </div>
      <div
        style="width: 16%;display: flex;flex-direction: column;justify-content: center;"
      >
        <div
          style="color: #E00000;font-size: 22px;font-weight: 600;"
          v-if="source.transactionType == 1"
        >
          {{ source.price }}元
        </div>
        <div
          style="color: #E00000;font-size: 22px;font-weight: 600;"
          v-if="source.transactionType == 2"
        >
          {{ source.price }}万
        </div>
        <div style="height: 9px;"></div>
        <div
          style="color: #333333;font-size: 12px;font-weight: 400;"
          v-if="source.transactionType == 2"
        >
          {{ ((source.price * 10000) / source.area).toFixed(2) }}元/㎡
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number
    },
    source: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    housedetails(item) {
      if (item.transactionType == 1) {
        const routeLink = this.$router.resolve({
          path: "/index/leaseDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
      } else {
        const routeLink = this.$router.resolve({
          path: "/index/newHouseDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
      }
    },
    toAgent(item) {
      var path = "/index/goldConsultant?id=";
      if (!item.shopId) {
        path = "/index/goldConsultant?id=";
      }
      const routeLink = this.$router.resolve({
        path: path + item.userId
      });
      window.open(routeLink.href, "_blank");
    },
    shopdetails(item) {
      if (item.hasOwnProperty("shopId") && item.shopId != "") {
        const routeLink = this.$router.resolve({
          path: "/index/ShopDetails?id=" + item.shopId
        });
        window.open(routeLink.href, "_blank");
      } else {
        this.$message({
          message: "个人房源！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
